import 'package:beamer/beamer.dart';
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

import '../../../provide/riverpod_provider.dart';

class ShoppingCartComputed extends ConsumerStatefulWidget {
  const ShoppingCartComputed({super.key});

  @override
  _ShoppingCartComputedState createState() => _ShoppingCartComputedState();
}

class _ShoppingCartComputedState extends ConsumerState<ShoppingCartComputed> {
  @override
  Widget build(BuildContext context) {
    final cartList = ref.watch(shoppingCartIsSelectProvide);
    final isAllSelected = cartList.isNotEmpty && cartList.every((item) => item.selected);
    final selectedTotalPrice = ref.watch(shoppingCartIsSelectProvide.notifier).selectedTotalPrice;

    return Container(
      width: double.infinity,
      height: 60.0,
      decoration: const BoxDecoration(
        color: Colors.white,
      ),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          SizedBox(
            child: Row(
              children: [
                Checkbox(
                  value: isAllSelected,
                  onChanged: (value) {
                    setState(() {
                      ref.read(shoppingCartIsSelectProvide.notifier).toggleAllSelected2();
                    });
                  },
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(20),
                  ),
                  fillColor: WidgetStateProperty.resolveWith<Color>((state) {
                    if (state.contains(WidgetState.selected)) {
                      return Colors.teal;
                    }
                    return Colors.transparent;
                  }),
                ),
                const Text("全選"),
                const SizedBox(width: 10),
                RichText(
                  text: TextSpan(
                    text: "合計: ¥",
                    style: const TextStyle(color: Colors.red),
                    children: [
                      TextSpan(
                        text: "$selectedTotalPrice",
                        style: const TextStyle(
                          color: Colors.red,
                          fontSize: 20,
                        ),
                      )
                    ],
                  ),
                ),
              ],
            ),
          ),
          TextButton(
            onPressed: () {
              Beamer.of(context).beamToNamed('/oder_payment');
            },
            child: Container(
              width: 100.0,
              height: 50.0,
              decoration: const BoxDecoration(
                color: Colors.teal,
              ),
              child: const Center(
                child: Text(
                  "去結算",
                  style: TextStyle(color: Colors.white, fontSize: 16),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}
